<%@ page import="mrHunter.UserInf" %>
<%@ page import="java.sql.*" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: yz_yang
  Date: 2019/2/26
  Time: 21:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8"%>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <meta name="description" content="">
    <meta name="author" content="">

    <link href="../../resources/css/buttons.css" rel="stylesheet" >
    <link href="../../resources/css/mySubmission.css" rel="stylesheet" >

    <link rel="icon" href="../../resources/ico/favicon.ico">

    <link href="../../resources/css/lib/bootstrap.min.css" rel="stylesheet">
    <link href="../../resources/css/theme.css" rel="stylesheet">
    <link href="../../resources/css/lib/jquery-confirm.min.css" rel="stylesheet">

    <title>mrSubmission</title>
</head>
<body>

<!--navbar-->
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand">
                Problem<c:out value="${problemInf.no}"></c:out>
            </a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
            <form:form method="post" modelAttribute="userInf">
                <ul class="nav navbar-nav navbar-right">
                    <li><a href="/tutorial">Tutorial</a></li>
                    <li><a title="${userInf.email}">${userInf.username}</a></li>
                    <li><a href="/exit">Logout</a></li>
                    <li><a href="/puzzleType/${problemInf.type}">Back</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-left">
                    <li><a onclick="showBox(2)">grammer mannual</a></li>
                </ul>
            </form:form>
        </div>
    </div>
</nav>

<!--main page-->

<!--div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main"-->

<div class="tableBackground" id="tableBackground"></div>
<!--manual box-->
<div class="popup" id="manualBox">
    <div class="header">
        <span>Grammar Manual</span>
    </div>
    <div class="header-right" onclick="hideBox(2)">x</div>
    <div class="mainTextBody">
        <div style="font-size: 24px; font-weight: bolder; font-family:'Times New Roman',Georgia,Serif;">Basic Rules</div>
        <div style="font-size: 16px; font-family:'Times New Roman',Georgia,Serif;">Our system uses Java as the language. By using template and APIs, we help users simplify their code. The template structure used in this system is as follows.</div>
        <div style="border-color: #7cb8bb; border-width: 2px;border-style: solid; width: 100%; height: 140px">
            <div style="position:relative; width: 80%; height: 100px; left: 10%; top:20px">
                <div style="font-size: 16px; font-family:Consolas; color: #BDBDBD; font-style: italic">1.	The system allocates variables to users</div>
                <div style="font-size: 16px; font-family:Consolas">2.	User assigns values to inputs whose values need to be assigned</div>
                <div style="font-size: 16px; font-family:Consolas; color: #BDBDBD; font-style: italic">3.	The system generates outputs to corresponding inputs</div>
                <div style="font-size: 16px; font-family:Consolas">4.	User writes down the relation</div>
            </div>
        </div>
        <div style="font-size: 16px; font-family:'Times New Roman',Georgia,Serif;">Users need to finish part 2 and part 4 on their own, and the system will finish part 1 and part 3 automatically.</div><br/>
        <div style="font-size: 24px; font-weight: bolder;font-family:'Times New Roman',Georgia,Serif;">A simple example</div>
        <div style="font-size: 16px; font-family:'Times New Roman',Georgia,Serif;">Here is a simple example on how to write your first program in our system after you already have some idea about condition and relation of inputs and outputs. In the example, we need to describe the condition and the relation:
            <span style="font-weight: bold">When the input values are opposite to each other, their corresponding output values are also opposite to each other.</span>
        </div><br/>
        <div style="font-size: 16px; font-family:'Times New Roman',Georgia,Serif;">First using the following two drop down boxes to choose the number of inputs whose values are assigned by system, and the number of inputs whose values are assigned by yourself.</div>
        <img src ="../../resources/image/manual1.jpg" width="50%"/>
        <div style="font-size: 16px; font-family:'Times New Roman',Georgia,Serif;">Now you get one system assigned variable input1, and one user assigned variable input2. How do we use them? The types of input variables and output variables are all classes. You can get the domain information of input class type and output class type in following form.</div>
        <img src ="../../resources/image/manual2.jpg" width="80%"/>
        <div style="font-size: 16px; font-family:'Times New Roman',Georgia,Serif;">In the domain of input class type, there is a double type variable x. In the domain of output class type, there is a double type variable x, so you can use <span style="font-weight: bold">input2.x=-input1.x;</span> to assign variable input2.</div>
        <div style="font-size: 16px; font-family:'Times New Roman',Georgia,Serif;">After you finish variable value assignment, the system will generate outputs to corresponding inputs automatically. You can use assert to describe the relation. For example, <span style="font-weight: bold">assert(output2.x==-output1.x);</span> or<span style="font-weight: bold;"> if(output2.x==-output1.x) assert(true); else assert(false);</span></div><br/>
        <div style="font-size: 16px; font-family:'Times New Roman',Georgia,Serif;">In summary, the code can be:</div>
        <img src ="../../resources/image/manual3.jpg" width="100%"/><br/>
        <div style="font-size: 24px; font-weight: bolder; font-family:'Times New Roman',Georgia,Serif;">API Specification</div>
        <div style="font-size: 16px; font-family:'Times New Roman',Georgia,Serif;">You may need following APIs to simplify your code or handle difficult puzzles.</div>
        <table style="width: 100%; border: 1px solid black;">
            <thead>
            <tr style="height:50px;font-size: 20px;font-weight: bold; font-family:'Times New Roman',Georgia,Serif;"><td width="30%" style="text-align: center;border: 1px solid black;">Class</td><td width="70%" style="text-align: center;border: 1px solid black;">Description</td></tr>
            </thead>
            <tbody>
            <tr style="height: 50px">
                <td style="font-size: 20px; font-family:'Times New Roman',Georgia,Serif; color: #01a252; text-decoration: underline; text-align: center;border: 1px solid black;" onclick="showBox(3)" >Graph</td>
                <td style="font-size: 20px; font-family:'Times New Roman',Georgia,Serif; text-align: center;border: 1px solid black;">Operations on graph, like adding/deleting vertexes, adding/deleting edges, etc.</td>
            </tr>
            <tr style="height: 50px;">
                <td style="font-size: 20px; font-family:'Times New Roman',Georgia,Serif; color: #01a252; text-decoration: underline; text-align: center;border: 1px solid black;" onclick="showBox(4)">Array</td>
                <td style="font-size: 20px; font-family:'Times New Roman',Georgia,Serif; text-align: center;border: 1px solid black;">Operations on array, like increasing all numbers in array, etc.</td>
            </tr>
            </tbody>
        </table>
    </div>

</div>

<!--illustration of graph API-->
<div class="popup" id="graphAPIBox">
    <div class="header">
        <span>Method Summary of Class Graph</span>
    </div>
    <div class="header-right" onclick="hideBox(3)">x</div>
    <div class="mainTextBody">
        <table style="width: 100%; border: 1px solid black;">
            <thead style="height: 50px">
            <tr style="font-size: 20px;font-weight: bold; font-family:Calibri;"><td width="20%" style="text-align: center;border: 1px solid black;">Type</td><td width="80%" style="text-align: center;border: 1px solid black;">Method and Description</td></tr>
            </thead>
            <tbody>
            <tr>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;" >int</td>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;">getVertexNum()<br/>
                    gets vertex num of graph
                </td>
            </tr>
            <tr>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;">void</td>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;">setVertexNum(int v)<br/>
                    sets vertex num of graph
                </td>
            </tr>
            <tr>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;" >int[][]</td>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;">getEdges()
                    <br/>   gets adjacency matrix of graph
                </td>
            </tr>
            <tr>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;" >void</td>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;">setEdges(int[][] edges)
                    <br/>   sets adjacency matrix of graph
                </td>
            </tr>
            <tr>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;" >Graph</td>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;">addEdge()
                    <br/>  adds one edge to graph randomly
                </td>
            </tr>
            <tr>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;" >Graph</td>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;">addEdge(int num)
                    <br/>   adds num number edges to graph randomly
                </td>
            </tr>
            <tr>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;" >Graph</td>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;">deleteEdge()
                    <br/>   deletes one edge to graph randomly
                </td>
            </tr>
            <tr>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;" >Graph</td>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;">deleteEdge(int num)
                    <br/>   deletes num number edges to graph randomly
                </td>
            </tr>
            <tr>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;" >Graph</td>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;">addVertex()
                    <br/>   adds one vertex to graph randomly, with edges randomly connected to other vertexes
                </td>
            </tr>
            <tr>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;" >Graph</td>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;">addVertex(int num)
                    <br/>   adds num number vertexes to graph randomly, with edges randomly connected to other vertexes
                </td>
            </tr>
            <tr>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;" >Graph</td>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;">addVertex(int num, int type)
                    <br/>    adds num number vertexes to graph randomly, with edges randomly connected to other vertexes when type equals 1, with no edge connected to other vertexes when type equals 2, with edges connected to all other vertexes when type equals 3
                </td>
            </tr>
            <tr>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;" >Graph</td>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;">deleteVertex()
                    <br/>   deletes one vertex in graph randomly
                </td>
            </tr>
            <tr>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;" >Graph</td>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;">deleteVertex(num)
                    <br/>    deletes num number vertexes to graph randomly
                </td>
            </tr>
            <tr>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;" >Graph</td>
                <td style="font-size: 20px; font-family:Calibri; text-align: center;border: 1px solid black;">complement()
                    <br/>   Get the complementary graph
                </td>
            </tr>
            </tbody>
        </table>
        <img src="../../resources/image/graphAPIExp.JPG" width="100%">
    </div>
    <div class="bottom-right" onclick="backToManualBox(3)">back</div>
</div>

<div class="inf-part">
    <div class="myTable" id="myTable2">
        <table class="table table-bordered tab" id="myTable">
            <thead>
            <tr class="active">
                <th rowspan="2" >execution</th>
                <th colspan="${problemInf.inputNum}" style="text-align: center">Input</th>
                <th colspan="${problemInf.outputNum}" style="text-align: center">Output</th>
                <th rowspan="2">Operation</th>
            </tr>
            <tr class="active">
                <c:forEach var="i" begin="0" end="${problemInf.inputNum-1}">
                    <th style="text-align: left" title="${problemInf.inputInf[i]}"> <c:out value="${problemInf.inputType[i]}"/></th>
                </c:forEach>
                <c:forEach var="i" begin="0" end="${problemInf.outputNum-1}">
                    <th style="text-align: left" title="${problemInf.outputInf[i]}"> <c:out value="${problemInf.outputType[i]}"/></th>
                </c:forEach>
            </tr>

            </thead>
            <tbody>
            <c:forEach items="${problemInf.inputsAndOutputs}" var="inAndOut" varStatus="status">
                <tr class="active">
                    <td style="color: #7aa6da">${status.index+1}</td>

                    <c:if test="${problemInf.type.equals(\"graph\")}">
                        <td id="graph${status.index}" onclick="showGraph(${status.index},'${inAndOut.key.split(",")[0]}')"></td>
                        <c:forEach var="i" begin="1" end="${problemInf.inputNum-1}">
                            <td> <c:out value="${inAndOut.key.split(\",\")[i]}"/></td>
                        </c:forEach>
                    </c:if>

                    <c:if test="${!problemInf.type.equals(\"graph\")}">
                        <c:forEach var="i" begin="0" end="${problemInf.inputNum-1}">
                            <td> <c:out value="${inAndOut.key.split(\",\")[i]}"/></td>
                        </c:forEach>
                    </c:if>
                    <c:forEach var="i" begin="0" end="${problemInf.outputNum-1}">
                        <td> <c:out value="${inAndOut.value.split(\",\")[i]}"/></td>
                    </c:forEach>
                    <td></td>
                </tr>
            </c:forEach>
            </tbody>
        </table>
    </div>
    <div class="getInput" id="getInput">
        <div class="input-group">
            <input type="text" class="form-control" id="selfInput" path="input"  placeholder="input"/>
            <span class="input-group-btn">
                    <button class="btn btn-default" type="button" id="selfInputSubmit" value="getOutput" name="type">Get Output!</button>
                </span>
        </div>
    </div>
    <div id="inputErrorInf">Input Format Error</div>
</div>
<div class="mr-part">
    <form>
        <div class="sourceInput">
            <label class="col-sm-1" id="dropdownBox1">
                <select id="sourceInputNum" class="form-control">
                    <option value="1" selected="selected">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </label>
            <p class="form-control-static" id='selectedSource' onclick="change()" style="color: white"></p>
        </div>
        <div class="followupInput">
            <label class="col-sm-1" id="dropdownBox2">
                <select id="followupInputNum" class="form-control">
                    <option value="1" selected="selected">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                </select>
            </label>
            <p class="form-control-static" id='selectedFollowup' onclick="change()" style="color: white"></p>
        </div>

        <div class="myCodemirror">
            <div class="col-md-6" id="codemirror1">
                <label for="mr1" style="color: white">Value Assignment(Inquire grammar manual for details)</label><textarea id="mr1" class="my_codemirror"></textarea>
            </div>
            <div class="col-md-6" id="codemirror2">
                <label for="mr2" style="color: white">Relationship Description</label><textarea id="mr2" class="my_codemirror"></textarea>
            </div>
        </div>
        <div class="mySubmit" id="submit">
            <div class="pull-right">
                <div class="form-group" style="padding: 10px 10px"-->
                    <button class="btn btn-info" type="button" value="submit" id="mrSubmit" name="type">Submit!</button>
                </div>
            </div>
        </div>
        <div class="myResult">
            <div class="well" id="mrResult">
            </div>
        </div>
    </form>
</div>




<!--tutorial-->
<div class="tutorialBackground" id="tutorialBackground"></div>
<div class="tutorialBackground" id="tutorialBackground2"></div>
<div class="pages" id="pages">
    <div id="nextButton" onclick="nextPage()">>>></div>
    <div class="pageWord" id="page0">This is our game interface. You can only get information of inputs and outputs of several executions here, no explanation for puzzles.</div>
    <div class="pageWord" id="page2">When inputs of different executions satisfy some conditions, the inputs and their corresponding outputs will have some relations.</div>
    <div class="pageWord" id="page3">You need to find out what are the conditions and what are the relations.</div>
    <div class="pageWord" id="page4">Let’s take a simple example!</div>
</div>
<div class="pages2" id="pages2">
    <div id="nextButton2" onclick="nextPage()">>>></div>

    <div class="pageWord2" id="page5">First, look at these inputs and outputs. When input equals 1, the output equals 0.841; when input equals -1, the output equals -0.841.</div>
    <div class="pageWord2" id="page6">We can guess when the inputs are opposite to each other, their corresponding outputs are opposite to each other.  </div>
    <div class="pageWord2" id="page7">This conjecture is also satisfied when input equals 2.</div>
    <div class="pageWord2" id="page8">If you are still not sure, you can use this part to get more inputs and their corresponding outputs to test your conjecture.</div>
</div>
<div class="pages3" id="pages3">
    <div id="nextButton3" onclick="nextPage()">>>></div>
    <div class="pageWord3" id="page10">Now we have a condition (inputs opposite to each other) and a relation (their corresponding outputs opposite to each other), then we need to describe them.</div>
    <div class="pageWord3" id="page11">Look at following two boxes, the left one is used to write the condition.</div>
    <div class="pageWord3" id="page12">The right one is used to write the relation.</div>
    <div class="pageWord3" id="page13">The two dropdown boxes are used to assign your inputs. </div>
    <div class="pageWord3" id="page14">Take the condition “inputs opposite to each other” as an example.</div>
    <div class="pageWord3" id="page15">You need two numbers for the condition. Let one be x, then the other is -x. X is an arbitrary value, -x is obtained from x.</div>
    <div class="pageWord3" id="page16">For convenience, the system provides us with variables requiring random assignment and assigns values to them.</div>
    <div class="pageWord3" id="page17">You can use the first drop-down box to choose number of variables requiring system assignment.</div>
    <div class="pageWord3" id="page18">By using system assigned x, we can easily assign value -x to the other input.</div>
    <div class="pageWord3" id="page19">You can use the second drop-down box to choose number of variables whose values are assigned by yourself.</div>
    <div class="pageWord3" id="page20">The grammar used in our website is based on java. Click the grammar manual button for details.</div>
    <div class="pageWord4" id="page21">After writing down your program， click submit button to submit.</div>
    <div class="pageWord4" id="page22">If you passed, go ahead and challenge more!</div>
</div>
<div class="arrow" id="arrow1"></div>
<div class="arrow" id="arrow2"></div>
<div class="arrow" id="arrow3"></div>
<div class="arrow" id="arrow4"></div>
<div class="arrow" id="arrow5"></div>
<div id="page1-1">Click here to get information of inputs and outputs.</div>
<div id="page9-1">Click here to exit.</div>


<link href="../../resources/codemirror/lib/codemirror.css" rel="stylesheet" >
<link href="../../resources/codemirror/theme/rubyblue.css" rel="stylesheet" >
<link href="../../resources/codemirror/addon/fold/foldgutter.css" rel="stylesheet">
<link href="../../resources/codemirror/addon/hint/show-hint.css" rel="stylesheet">

<script src="../../resources/js/jquery-3.3.1.min.js"></script>
<script src="../../resources/js/jquery-confirm.min.js"></script>
<script src="../../resources/codemirror/lib/codemirror.js"></script>
<script src="../../resources/codemirror/mode/clike/clike.js"></script>
<script src="../../resources/codemirror/addon/display/placeholder.js"></script>
<!--支持代码折叠-->
<script src="../../resources/codemirror/addon/fold/foldcode.js"></script>
<script src="../../resources/codemirror/addon/fold/foldgutter.js"></script>
<script src="../../resources/codemirror/addon/fold/brace-fold.js"></script>
<script src="../../resources/codemirror/addon/fold/comment-fold.js"></script>
<!--括号匹配-->
<script src="../../resources/codemirror/addon/edit/matchbrackets.js"></script>
<script src="../../resources/codemirror/addon/hint/show-hint.js"></script>

<script src="../../resources/js/d3.v5.min.js"></script>

<!--tutorial-->
<script>
    if(${MRInf.formOn==false}){
        document.getElementById('tableBackground').style.display="none";
    }
    else{
        document.getElementById('tableBackground').style.display="";
    }
    document.getElementById('manualBox').style.display="none";
    document.getElementById('graphAPIBox').style.display="none";
</script>
<script>
    if(${userInf.passTutorial==0}){
        document.getElementById('tutorialBackground').style.display="";
        document.getElementById('tutorialBackground2').style.display="none";
        document.getElementById('nextButton').style.display="";
        document.getElementById('page0').style.display="";
        document.getElementById('page2').style.display="none";
        document.getElementById('page3').style.display="none";
        document.getElementById('page4').style.display="none";
        document.getElementById('pages2').style.display="none";
        document.getElementById('pages3').style.display="none";
        document.getElementById('page1-1').style.display="none";
        document.getElementById('page9-1').style.display="none";
        document.getElementById('arrow1').style.display="none";
        document.getElementById('arrow2').style.display="none";
        document.getElementById('arrow3').style.display="none";
        document.getElementById('arrow4').style.display="none";
        document.getElementById('arrow5').style.display="none";
    }
    else{
        document.getElementById('tutorialBackground').style.display="none";
        document.getElementById('tutorialBackground2').style.display="none";
        document.getElementById('pages').style.display="none";
        document.getElementById('pages2').style.display="none";
        document.getElementById('pages3').style.display="none";
        document.getElementById('page1-1').style.display="none";
        document.getElementById('page9-1').style.display="none";
        document.getElementById('arrow1').style.display="none";
        document.getElementById('arrow2').style.display="none";
        document.getElementById('arrow3').style.display="none";
        document.getElementById('arrow4').style.display="none";
        document.getElementById('arrow5').style.display="none";
        document.getElementById('nextButton2').style.display="none";
    }
    tutorialNum=0;
</script>
<script type="text/javascript">
    function nextPage() {
        tutorialNum++;
        if(1==tutorialNum){
            document.getElementById('page0').style.display="none";

            document.getElementById('page2').style.display="";
            document.getElementById('tutorialBackground').style.display="";
            document.getElementById('tutorialBackground2').style.display="";
            //document.getElementById('page1-1').style.display="none";
            //document.getElementById('arrow1').style.display="none";
            //document.getElementById('button-form').style.zIndex=1;
            document.getElementById('nextButton2').style.display="";
        }
        else if(2==tutorialNum){
            document.getElementById('page2').style.display="none";
            document.getElementById('page3').style.display="";
        }
        else if(3==tutorialNum){
            document.getElementById('page3').style.display="none";
            document.getElementById('page4').style.display="";
        }
        else if(4==tutorialNum){
            document.getElementById('pages').style.display="none";
            document.getElementById('pages2').style.display="";
            document.getElementById('page6').style.display="none";
            document.getElementById('page7').style.display="none";
            document.getElementById('page8').style.display="none";
            document.getElementById('page5').style.display="";
            document.getElementById('myTable2').style.zIndex=75;
        }
        else if(5==tutorialNum){
            document.getElementById('page5').style.display="none";
            document.getElementById('page6').style.display="";
        }
        else if(6==tutorialNum){
            document.getElementById('page6').style.display="none";
            document.getElementById('page7').style.display="";
        }
        else if(7==tutorialNum){
            document.getElementById('page7').style.display="none";
            document.getElementById('page8').style.display="";
            //document.getElementById('arrow2').style.display="";
            document.getElementById('myTable2').style.zIndex=1;
            document.getElementById('getInput').style.zIndex=75;
        }
        else if(8==tutorialNum) {
            document.getElementById('pages2').style.display="none";
            //document.getElementById('page9-1').style.display="none";
            //document.getElementById('arrow3').style.display="none";
            document.getElementById('getInput').style.zIndex=1;

            document.getElementById('tutorialBackground').style.display="";
            //TODO:scroll to the bottom
            var scrollBottom=document.getElementById('mrResult');
            scrollBottom.scrollTop=scrollBottom.scrollHeight;
            document.getElementById('pages3').style.display="";
            document.getElementById('page11').style.display="none";
            document.getElementById('page12').style.display="none";
            document.getElementById('page13').style.display="none";
            document.getElementById('page14').style.display="none";
            document.getElementById('page15').style.display="none";
            document.getElementById('page16').style.display="none";
            document.getElementById('page17').style.display="none";
            document.getElementById('page18').style.display="none";
            document.getElementById('page19').style.display="none";
            document.getElementById('page20').style.display="none";
            document.getElementById('page21').style.display="none";
            document.getElementById('page22').style.display="none";
        }
        else if(9==tutorialNum){
            document.getElementById('page10').style.display="none";
            document.getElementById('page11').style.display="";
            document.getElementById('codemirror1').style.zIndex=75;
        }
        else if(10==tutorialNum){
            document.getElementById('page11').style.display="none";
            document.getElementById('page12').style.display="";
            document.getElementById('codemirror1').style.zIndex=1;
            document.getElementById('codemirror2').style.zIndex=75;
        }
        else if(11==tutorialNum) {
            document.getElementById('page12').style.display="none";
            document.getElementById('page13').style.display="";
            document.getElementById('codemirror2').style.zIndex=1;
            document.getElementById('dropdownBox1').style.zIndex=75;
            document.getElementById('selectedSource').style.zIndex=75;
            document.getElementById('dropdownBox2').style.zIndex=75;
            document.getElementById('selectedFollowup').style.zIndex=75;
        }
        else if(12==tutorialNum) {
            document.getElementById('page13').style.display="none";
            document.getElementById('page14').style.display="";
        }
        else if(13==tutorialNum) {
            document.getElementById('page14').style.display="none";
            document.getElementById('page15').style.display="";
        }
        else if(14==tutorialNum) {
            document.getElementById('page15').style.display="none";
            document.getElementById('page16').style.display="";
        }
        else if(15==tutorialNum) {
            document.getElementById('page16').style.display="none";
            document.getElementById('page17').style.display="";
        }
        else if(16==tutorialNum) {
            document.getElementById('page17').style.display="none";
            document.getElementById('page18').style.display="";
        }
        else if(17==tutorialNum) {
            document.getElementById('page18').style.display="none";
            document.getElementById('page19').style.display="";
        }
        else if(18==tutorialNum) {
            document.getElementById('page19').style.display="none";
            document.getElementById('page20').style.display="";
            document.getElementById('dropdownBox1').style.zIndex=1;
            document.getElementById('selectedSource').style.zIndex=1;
            document.getElementById('dropdownBox2').style.zIndex=1;
            document.getElementById('selectedFollowup').style.zIndex=1;
           // document.getElementById('button-mannual').style.zIndex=75;
            //document.getElementById('tutorialBackground2').style.display="";

            // document.getElementById('arrow4').style.display="";
        }
        else if(19==tutorialNum){
            document.getElementById('page20').style.display="none";
            document.getElementById('page21').style.display="";
            //document.getElementById('button-mannual').style.zIndex=1;
            document.getElementById('submit').style.zIndex=75;
          //  document.getElementById('arrow4').style.display="none";
          //  document.getElementById('arrow5').style.display="";
        }
        else if(20==tutorialNum){
            document.getElementById('page21').style.display="none";
            document.getElementById('page22').style.display="";
            //document.getElementById('arrow5').style.display="none";
        }
        else if(0!=tutorialNum){
            document.getElementById('pages3').style.display="none";
            //document.getElementById('arrow5').style.display="none";
            document.getElementById('tutorialBackground').style.display="none";
            document.getElementById('tutorialBackground2').style.display="none";
            <%
        try {
            Class.forName("com.mysql.jdbc.Driver");  ////驱动程序名
            String url = "jdbc:mysql://localhost:3306/db"; //数据库名
            String username = "root";  //数据库用户名
            String password = "YourRootPassword";  //数据库用户密码
            Connection conn = DriverManager.getConnection(url, username, password);  //连接状态
            UserInf user=(UserInf) request.getSession().getAttribute("user");
            if(conn != null){
                String sql="UPDATE userinf SET passTutorial=1 WHERE username=?";
                PreparedStatement pstmt=conn.prepareStatement(sql);
                pstmt.setString(1,user.getUsername());
                int flag=pstmt.executeUpdate();
                //Statement stmt = conn.createStatement();
                //int res = stmt.executeUpdate("UPDATE userinf SET passTutorial=1 WHERE username=?",String.class,user.getUsername());
            }
            else{
                System.out.println("---------DataBase Connection Failed---------");
            }
        }catch (Exception e) {
            System.out.println(e);
        }
%>
        }
    }
</script>
<script type="text/javascript">
    function showBox(no){
        if(${userInf.passTutorial==0}){
            nextPage();
        }
        //display grammar manual box
        if(2==no)
            document.getElementById("manualBox").style.display="";
        //display graph API specification box
        else if(3==no){
            document.getElementById("manualBox").style.display="none";
            document.getElementById("graphAPIBox").style.display="";
        }

        document.getElementById('tableBackground').style.display="";
    }
    function hideBox(no){
        if(${userInf.passTutorial==0}){
            nextPage();
        }
        //hide grammar manual box
        if(2==no)
            document.getElementById("manualBox").style.display="none";
        //hide graph API specification box
        else if(3==no){
            //document.getElementById("manualBox").style.display="none";
            document.getElementById("graphAPIBox").style.display="none";
        }
        document.getElementById('tableBackground').style.display="none";
    }
    function backToManualBox(no) {
        if(3==no){
            document.getElementById("manualBox").style.display="";
            document.getElementById("graphAPIBox").style.display="none";
        }
    }
</script>

<!--code mirror-->
<script type="text/javascript">
    var myCodeMirror1= CodeMirror.fromTextArea(document
        .getElementById("mr1"), {
        lineNumbers: true,
        mode:"text/x-java",
        //mode:"javascript",
        theme: "rubyblue",

        //代码折叠
        lineWrapping:true,
        foldGutter: true,
        gutters:["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        matchBrackets:true,
        smartIndent: true,

        extraKeys: {"F1": "autocomplete"},
    });
    var myCodeMirror2= CodeMirror.fromTextArea(document
        .getElementById("mr2"), {
        mode:"text/x-java",
        //mode:"javascript",
        lineNumbers: true,
        theme: "rubyblue",

        //代码折叠
        lineWrapping:true,
        foldGutter: true,
        gutters:["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
        matchBrackets:true,
        smartIndent: true,

        extraKeys: {"F1": "autocomplete"},
    });
    var s1="/*Assign values to inputs whose value need to be assigned here...*/\n";
    if(1==${problemInf.no}&&${problemInf.type.equals("math")})
        s1+="/*Here ia an example*/\n" +
            "input2.x=-input1.x;";
    myCodeMirror1.setValue(s1);

    var s2="/*The outputs of corresponding inputs have been generated, you can describe relations here*/\n";
    if(1==${problemInf.no}&&${problemInf.type.equals("math")})
        s2+="/*Here is an example*/\n" +
            "if(output2.x==-output1.x)\n" +
            "     assert(true);\n" +
            "   else\n" +
            "     assert(false);";
    myCodeMirror2.setValue(s2);

</script>

<!--show graph-->
<script>
    function showGraph(index,data) {
        var width = 200;  //画布的宽度
        var height = 200;   //画布的高度
        var svg = d3.selectAll("#graph"+index).append("svg")          //添加一个svg元素
            .attr("width", width)       //设定宽度
            .attr("height", height);    //设定高度
        var marge = {top:10,bottom:10,left:10,right:10}
        var g = svg.append("g")
            .attr("transform","translate("+marge.top+","+marge.left+")");

        var rows=data.split("%");
        var vNum=rows.length;

        var nodes = [];
        var edges = [];

        for(i=0;i<vNum;i++){
            nodes.push({name:"A"+i});
        }

        for(i=0;i<vNum;i++){
            var cols=rows[i].split(" ")
            for(j=i+1;j<vNum;j++){
                if(1==cols[j]){
                    edges.push({source:i,target:j,relation:"",value:1});
                }
            }
        }

        //设置一个color的颜色比例尺，为了让不同的扇形呈现不同的颜色
        var colorScale = d3.scaleOrdinal()
            .domain(d3.range(nodes.length))
            .range(d3.schemeCategory10);

        //新建一个力导向图
        var forceSimulation = d3.forceSimulation()
            .force("link",d3.forceLink())
            .force("charge",d3.forceManyBody())
            .force("center",d3.forceCenter());;

        //初始化力导向图，也就是传入数据
        //生成节点数据
        forceSimulation.nodes(nodes)
            .on("tick",ticked);//这个函数很重要，后面给出具体实现和说明
        //生成边数据
        forceSimulation.force("link")
            .links(edges)
            .distance(function(d){//每一边的长度
                return d.value*50;
            })
        //设置图形的中心位置
        forceSimulation.force("center")
            .x(width/2)
            .y(height/2);
        //在浏览器的控制台输出
        console.log(nodes);
        console.log(edges);

        //有了节点和边的数据后，我们开始绘制
        //绘制边
        var links = g.append("g")
            .selectAll("line")
            .data(edges)
            .enter()
            .append("line")
            .attr("stroke",function(d,i){
                return colorScale(i);
            })
            .attr("stroke-width",1);
        var linksText = g.append("g")
            .selectAll("text")
            .data(edges)
            .enter()
            .append("text")
            .text(function(d){
                return d.relation;
            })

        //绘制节点
        //老规矩，先为节点和节点上的文字分组
        var gs = g.selectAll(".circleText")
            .data(nodes)
            .enter()
            .append("g")
            .attr("transform",function(d,i){
                var cirX = d.x;
                var cirY = d.y;
                return "translate("+cirX+","+cirY+")";
            })
            .call(d3.drag()
                .on("start",started)
                .on("drag",dragged)
                .on("end",ended)
            );

        //绘制节点
        gs.append("circle")
            .attr("r",5)
            .attr("fill",function(d,i){
                return colorScale(i);
            })
        //文字
        gs.append("text")
            .attr("x",-5)
            .attr("y",-10)
            .attr("dy",5)
            .text(function(d){
                return d.name;
            })


        function ticked(){
            links
                .attr("x1",function(d){return d.source.x;})
                .attr("y1",function(d){return d.source.y;})
                .attr("x2",function(d){return d.target.x;})
                .attr("y2",function(d){return d.target.y;});

            linksText
                .attr("x",function(d){
                    return (d.source.x+d.target.x)/2;
                })
                .attr("y",function(d){
                    return (d.source.y+d.target.y)/2;
                });

            gs
                .attr("transform",function(d) { return "translate(" + d.x + "," + d.y + ")"; });
        }
        function started(d){
            if(!d3.event.active){
                forceSimulation.alphaTarget(0.8).restart();
            }
            d.fx = d.x;
            d.fy = d.y;
        }
        function dragged(d){
            d.fx = d3.event.x;
            d.fy = d3.event.y;
        }
        function ended(d) {
            if (!d3.event.active) {
                forceSimulation.alphaTarget(0);
            }
            d.fx = null;
            d.fy = null;
        }
    }
</script>

<!--source input and follow-up input-->
<script>
    var sourceInput=document.getElementById('sourceInputNum');
    var followupInput=document.getElementById('followupInputNum');
    function change(){
        var s="Now the system has already assigned random values to: ";
        var f="You need to assign values to："
        var source=sourceInput.options[sourceInput.options.selectedIndex].text;
        var followup=followupInput.options[followupInput.options.selectedIndex].text;
        for(var i=0;i<source;i++){
            s+="input"+(i+1);
            if(i!=source-1)
                s+=", ";
        }
        for(var j=Number(source);j<Number(source)+Number(followup);j++){
            f+="input"+(j+1);
            if(j!=Number(source)+Number(followup)-1)
                f+=", ";
        }
        selectedSource=document.getElementById('selectedSource');
        selectedFollowup=document.getElementById('selectedFollowup');
        selectedSource.innerText=s;
        selectedFollowup.innerText=f;
    }
    sourceInput.onchange=function () {change();};
    followupInput.onchange=function () {change();};
</script>

<script type="text/javascript">
    function showResult(result) {
        $.alert({
            title:'Result',
            content: result,
            columnClass:"col-md-8 col-md-offset-2",
            draggable: true,
            dragWindowBorder: false,
            type: 'green',
            typeAnimated: true,
        });
    }
</script>
<script>
    form.on('submit(formDemo)',function (data) {
        layer.msg(JSON.stringify(data.field));
        return false;
    })
    function delRow(index) {

        index=index.substr(3);
        //alert(index);
        //alert($(t).parents("tr"));
        document.getElementById('myTable').deleteRow(index);
        var table =document.getElementById("myTable");
        var len=table.rows.length;
        var i=new Number(index)+1
        for (;i<=len;i=i+1){
            var temp=document.getElementById("row"+i);
            var temp2=document.getElementById("showRow"+i);
            //alert("before "+temp.id);
            temp.id="row"+(i-1);
            //alert("after "+temp.id);
            temp2.id="showRow"+(i-1);
            temp2.innerText=parseInt(temp2.innerText)-1;
            if(${problemInf.type.equals("graph")}) {
                var temp3=document.getElementById("graph"+i);
                temp3.id="graph"+(i-1);
            }
        }
    }
</script>
<script>
    $(document).ready(function(){
        $("#graph0").click();
        $("#graph1").click();
        $("#graph2").click();
        $("#graph3").click();
        $("#graph4").click();
        $("#selectedSource").click();
        $("#selectedFollowup").click();
        $("#selfInputSubmit").click(function () {
            var params = {};
            params.submitType=1;
            params.input = $("#selfInput").val();
            params.inputNum=${problemInf.inputNum};
            params.outputNum=${problemInf.outputNum};

            params.mr1="";
            params.mr2="";
            $.ajax({
                type: "POST",
                url: "/puzzleType/${problemInf.type}/${problemInf.no}",//注意路径
                data: params,
                dataType: "json",
                success: function (data) {
                    //alert(data.result);
                    document.getElementById("inputErrorInf").style.display="none";
                    var table =document.getElementById("myTable");
                    var rowNum=table.rows.length;
                    // alert(rowId);
                    // alert(rows);
                    var tempHtml = "<tr class='active'>"+"<td style='color: #7aa6da' id=showRow"+rowNum+">"+(rowNum-1)+"</td>";
                    if(${!problemInf.type.equals("graph")}){
                        for (var i=0;i<${problemInf.inputNum};i++){
                            tempHtml+="<td>"+params.input.split(",")[i]+"</td>";
                        }
                        for (var i=0;i<${problemInf.outputNum};i++){
                            tempHtml+="<td>"+data.result.split(",")[i]+"</td>";
                        }
                    }
                    else{
                        //TODO:When problem type is graph
                        tempHtml+="<td id=graph"+rowNum+" onclick= \"showGraph("+rowNum+",'"+params.input.split(",")[0]+"')\"></td>";
                        for (var i=1;i<${problemInf.inputNum};i++){
                            tempHtml+="<td>"+params.input.split(",")[i]+"</td>";
                        }
                        for (var i=0;i<${problemInf.outputNum};i++){
                            tempHtml+="<td>"+data.result.split(",")[i]+"</td>";
                        }
                    }
                    tempHtml+="<td><button type=button id=row" +rowNum+ " style='background-color:cornflowerblue; color: white' onclick='delRow(this.id)'>delete</button></td>";
                    tempHtml+="</tr>";
                    //alert(tempHtml);
                    $("#myTable").append(tempHtml);
                    if(${problemInf.type.equals("graph")}){
                        var num=rowNum;
                        var graphId="graph"+num.toString();
                        document.getElementById(graphId).click();
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    //alert(XMLHttpRequest.status);
                    //alert(XMLHttpRequest.readyState);
                    //alert(textStatus);
                    document.getElementById("inputErrorInf").style.display="";
                }
            });
        });
        $("#mrSubmit").click(function () {
            var params= {};
            params.submitType=2;
            params.sourceInputNum=$("#sourceInputNum").val();
            params.followupInputNum=$("#followupInputNum").val();
            params.mr1=myCodeMirror1.getValue();
            params.mr2=myCodeMirror2.getValue();
            $.ajax({
                type: "POST",
                url: "/puzzleType/${problemInf.type}/${problemInf.no}",//注意路径
                data: params,
                dataType: "json",
                success: function (data) {
                    $("#mrResult").html("Result: "+data.result);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    alert(XMLHttpRequest.status);
                    alert(XMLHttpRequest.readyState);
                    alert(textStatus);
                }
            });
        })
    });
</script>

</body>
</html>